<template>
  <div>
    <!-- table -->
    <a-card style="overflow: scroll;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        style="width:100%;"
        :loading="memberLoading"
      >
        <template slot="img" slot-scope="text">
          <template>
            <img @click="handleClickReview($hostServer+text)" class="table-img" :src="$hostServer+text" alt="">
          </template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span v-if="!record.verify_detail">
            <a @click="handleClickVerifySucc(record.id)">{{ $t('verifyList.tg') }}</a>
            <a-divider type="vertical" />
            <a style="color:red;" @click="handleClickVerifyFail(record.id)">{{ $t('verifyList.jj') }}</a>
          </span>
        </template>
      </a-table>
    </a-card>
    <DialogImg :img_url="curr_img_url" :is_show="curr_img_show"/>
  </div>
</template>

<script>
import { mixin, mixinDevice } from '@/utils/mixin'
import DialogImg from '../../components/DialogImg'

export default {
  name: 'List',
  mixins: [mixin, mixinDevice],
  components: {
    DialogImg
  },
  data () {
    return {
      curr_img_url: '',
      curr_img_show: false,
      description: this.$t('verifyList.zsxmcsfzhmsfztpskewm'),
      loading: false,
      memberLoading: false,
      curr_id: '',
      // table
      columns: [
        {
          title: this.$t('verifyList.zh'),
          dataIndex: 'username',
          key: 'username',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: this.$t('verifyList.c'),
          dataIndex: 'nickname',
          key: 'nickname',
          scopedSlots: { customRender: 'nickname' }
        },
        {
          title: this.$t('verifyList.zsxm'),
          dataIndex: 'realname',
          key: 'realname',
          scopedSlots: { customRender: 'realname' }
        },
        {
          title: this.$t('verifyList.sfzh'),
          dataIndex: 'id_card',
          key: 'id_card',
          scopedSlots: { customRender: 'id_card' }
        },
        {
          title: this.$t('verifyList.scsfz'),
          dataIndex: 'img_qrcode',
          key: 'img_qrcode',
          scopedSlots: { customRender: 'img' }
        },
        {
          title: '身份证图1',
          dataIndex: 'img_card1',
          key: 'img_card1',
          scopedSlots: { customRender: 'img' }
        },
        {
          title: '身份证图2',
          dataIndex: 'img_card2',
          key: 'img_card2',
          scopedSlots: { customRender: 'img' }
        },
        {
          title: this.$t('verifyList.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],

      errors: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$http.get('/verify/user_list').then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyList.sb'),
          description: err.message
        })
      })
    },
    handleClickVerifySucc (id) {
      this.$http.post('/verify/verify_user_succ', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyList.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyList.sb'),
          description: err.message
        })
      })
    },
    handleClickVerifyFail (id) {
      this.$http.post('/verify/verify_user_fail', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyList.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyList.sb'),
          description: err.message
        })
      })
    },
    handleClickReview (url) {
      this.curr_img_url = url
      this.curr_img_show = !this.curr_img_show
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
</style>
